<template>
  <div class="me">
    <van-nav-bar title="我的个人信息" v-if="!$store.state.islogin" />
    <van-nav-bar title="我的个人信息" v-else>
      <template #right> 欢迎：{{ $store.state.nickname }} </template>
    </van-nav-bar>
    <div v-if="!$store.state.islogin">
      <van-empty image="error" description="请登录">
        <van-button round type="danger" class="bottom-button" to="/login"
          >登录</van-button
        >
      </van-empty>
    </div>
    <div v-else>
      <div class="avatar">
        <van-image
          round
          width="8rem"
          height="8rem"
          :src="$store.state.avatar"
        />
      </div>
      <div class="author">
        <van-cell title="用户名" :value="$store.state.username" />
        <van-cell title="昵称" :value="$store.state.nickname" />
        <van-cell title="手机号码" :value="$store.state.phone" />
      </div>

      <div class="quit">
        <van-button
          type="primary"
          block
          color="linear-gradient(to right, #ff6034, #ee0a24)"
          @click="quit"
          >退出用户</van-button
        >
      </div>
    </div>
    <!-- 底部选项卡 -->
    <xrzp-tabbar></xrzp-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    quit() {
      this.$store.commit("loninOK", ["", "", "", ""]);
      this.$router.push("/login");
    },
  },
};
</script>
<style scoped>
.me .van-nav-bar {
  /* 统一主色调 */
  background-color: rgb(123, 183, 253);
}
.me .van-nav-bar__title,
.me .van-nav-bar__left a,
.me .van-nav-bar__right a {
  color: white;
}
.me .avatar {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.me .quit {
  padding: 10px;
}
.me .bottom-button {
  width: 160px;
  height: 40px;
}
</style>
